// 因为我们在webpack之中直接引入 jQuery 命名为 $ , 所以我们在项目之中可以直接使用 $ , 不需要额外的引入; 

$(function() {
    //点击关闭广告功能
    $(".click").click(function() {
            $(".advertising").addClass("down")
        })
        // $("#input").mouseout(function() {
        //     let input = $(".input")
        //     let options = {
        //         // 路径信息 : 
        //         url: "https://www.baidu.com/sugrec",
        //         data: {
        //             prod: "pc",
        //             from: "pc_web",
        //             wd: input[0].value,
        //             // 我们是不在data之中配置全局函数名的， 我们只需要传递百度接口接受全局函数名的字段名就可以了; 
        //         },
        //         // 使用jsonp发送请求的属性 
        //         // 1. 配置dataType 
        //         dataType: "jsonp",
        //         // 2. 配置字段名 
        //         jsonp: "cb",
        //         // 3. 我们也可以配置全局函数名 , 一般情况下不配置; 
        //         // jsonpcallback : "函数名"
        //     }
        //     let def = $.ajax(options);
        //     // console.log(input[0]);
        //     def.done(function(data) {
        //         console.log(data.g);
        //     })
        // })


    //搜索框百度的功能
    $('#input').bind('input propertychange', function() {
        let input = $(".input")
        let list = $("#list")
        let options = {
            // 路径信息 : 
            url: "https://www.baidu.com/sugrec",
            data: {
                prod: "pc",
                from: "pc_web",
                wd: input[0].value,
                // 我们是不在data之中配置全局函数名的， 我们只需要传递百度接口接受全局函数名的字段名就可以了; 
            },
            // 使用jsonp发送请求的属性 
            // 1. 配置dataType 
            dataType: "jsonp",
            // 2. 配置字段名 
            jsonp: "cb",
            // 3. 我们也可以配置全局函数名 , 一般情况下不配置; 
            // jsonpcallback : "函数名"
        }
        let def = $.ajax(options);
        // console.log(input[0]);
        def.done(function(data) {
                if (input[0].value == '') {
                    list.addClass("down");
                } else {
                    list.removeClass("down");
                    list.html(data.g.map(item => `<li>${item.q}</li>`).join(""));
                    // console.log(`<li>${data.g[0].q}</li>`);
                    // list.html(`<li>${data.g[0].q}</li>`)
                    // console.log(input[0].value);
                    console.log(list);

                }
            }
            // if(data.g.lenght===0)
        )
    });

    //轮播图
    let subscript = 0;
    let tab = $('.TAB div')
    let shu_img = $('.Shuffling_img img')
    let shu_img_kt = $('.Shuffling')
    let middle_beijing = $(".middle_beijing")
    let classification_details = $(".classification_details li")
    let xq = $(".xq")
        // $('tab[]')
    console.log(xq);
    //选中
    for (let i = 0; i < classification_details.length; i++) {
        $(classification_details[i]).mouseover(function() {
            for (let j = 0; j < classification_details.length; j++) {
                $(classification_details[j]).removeClass("xuanzhong")
                $(xq[i]).removeClass("oppen")
            }
            // console.log(i);
            $(classification_details[i]).addClass("xuanzhong")
            $(shu_img_kt[0]).addClass("down")
            $(xq[i]).addClass("oppen")
                // console.log(i);
            clearInterval(autoPlay);
        })
        $(classification_details[i]).mouseout(function() {
            $(shu_img_kt[0]).removeClass("down")
            for (let j = 0; j < classification_details.length; j++) {
                $(classification_details[j]).removeClass("xuanzhong")
                $(xq[i]).removeClass("oppen")
            }
            autoPlay = setInterval(function() {
                $('.gt').trigger('click')
                    // console.log('1');
            }, 3000)
        })
    }

    for (let i = 0; i < 8; i++) {

        $(tab[i]).mouseover(function() {
            for (let j = 0; j <= tab.length; j++) {
                $(tab[j]).removeClass("actives")
                $(shu_img[j]).removeClass("on")
            }
            for (let j = 0; j <= tab.length; j++) {
                $(tab[j]).removeClass("actives")
                $(shu_img[j]).removeClass("on")
            }
            // $(tab[subscript]).addClass("actives")
            // $(shu_img[subscript]).addClass("on")
            subscript = i;
            // console.log(i);

            // $(tab[subscript]).addClass("actives")
            $(shu_img[subscript]).addClass("on")


            $(tab[subscript]).addClass("actives")

            setInterval(function() {

                $(shu_img[subscript]).addClass("on")
                lbt(subscript)
            }, 1000)
        })
    }

    $('.gt').click(function() {
        // if (subscript ===)
        //移除所有的选中状态
        for (let i = 0; i <= tab.length; i++) {
            $(tab[i]).removeClass("actives")
            $(shu_img[i]).removeClass("on")
        }

        if (subscript == 7) {
            subscript = 0;
        } else {
            subscript++;
        }
        $(tab[subscript]).addClass("actives")
            // console.log(subscript);
        setInterval(function() {
            $(shu_img[subscript]).addClass("on")
            lbt(subscript)
        }, 1000)


    })
    $('.lt').click(function() {
        // if (subscript ===)
        //移除所有的选中状态
        for (let i = 0; i <= tab.length; i++) {
            $(tab[i]).removeClass("actives")
            $(shu_img[i]).removeClass("on")
        }

        if (subscript == 0) {
            subscript = 7;
        } else {
            subscript--;
        }
        $(tab[subscript]).addClass("actives")
            // console.log(subscript);
        setInterval(function() {
            $(shu_img[subscript]).addClass("on")
            lbt(subscript)
        }, 1000)
    })


    autoPlay = setInterval(function() {
        $('.gt').trigger('click')
            // console.log('1');
    }, 3000)



    //背景色变化
    function lbt(subscript) {
        if (subscript == 0) {
            // $(middle_beijing[0]).attr(" background-color", "rgb(144, 55, 37)")
            $(middle_beijing[0]).css("background", "rgb(61, 176, 243)")
        }
        if (subscript == 1) {
            // $(middle_beijing[0]).attr(" background-color", "rgb(144, 55, 37)")
            $(middle_beijing[0]).css("background", "rgb(144, 55, 37)")
        }
        if (subscript == 2) {
            $(middle_beijing[0]).css("background", "rgb(0, 168, 255)")
        }
        if (subscript == 3) {
            $(middle_beijing[0]).css("background", "rgb(172, 147, 215)")
        }
        if (subscript == 4) {
            $(middle_beijing[0]).css("background", "rgb(132, 12, 14)")
        }
        if (subscript == 5) {
            $(middle_beijing[0]).css("background", "rgb(0, 168, 255)")
        }
        if (subscript == 6) {
            $(middle_beijing[0]).css("background", "rgb(235, 235, 235)")
        }
        if (subscript == 7) {
            $(middle_beijing[0]).css("background", "rgb(24, 239, 208)")
        }
    }
})